function displayLists() {

	jQuery
	.ajax({
		type : 'GET', // Le type de ma requete
		url : '/myList/ListManager', // L'url vers laquelle la requete sera envoyee
		data : {
			action : "displayAll"
		},
		success : function(data, textStatus, jqXHR) {
			$('#lists').empty();
			var $table = $('<table border="1">').appendTo(
					$('#lists'));
			$('<th>').appendTo($table).text("Name");
			$('<th>').appendTo($table).text("Category");
			$('<th>').appendTo($table).text("Date");
			$('<th>').appendTo($table).text("   ");

			$.each(data, function(index, list) { // Iterate over the JSON array.
				$('<tr>')
				.appendTo($table)
				// Create HTML <tr> element, set its text content with currently iterated item and append it to the <table>.
				.append($('<td>').append($("<span class=\"clickable\" onclick=\"display(" + list.id+ ")\" >"+list.name+"</span>")))
				.append($('<td>').text(	list.category))
				.append($('<td>').text(	list.creationDate))
				// Create HTML <td> element, set its text content with id of currently iterated product and append it to the <tr>.
				.append($('<td>').append( $("<span class=\"clickable\" onclick=\"removeList("+ list.id + ");\" >").append($("<img class=\"clickable\" width=\"20\" src=\"/myList/ressources/remove.png\" alt='pou' />")))); // Create HTML <td> element, set its text content with name of currently iterated product and append it to the <tr>.
			});
			
			$('#displayedList').empty();
		},
		error : function(jqXHR, textStatus, errorThrown) {
			// Une erreur s'est produite lors de la requete
		}
	});

}
function display(list) {

	jQuery
	.ajax({
		type : 'GET', // Le type de ma requete
		url : '/myList/ListManager', // L'url vers laquelle la requete sera envoyee
		data : {
			listId : list,
			action : "displayContent"
		},
		success : function(data, textStatus, jqXHR) {
			$('#displayedList').empty();
			$('#displayedList').append(
					$('<h2>').text('List : ' + data.name));
			var $table = $('<table border="1">').appendTo(
					$('#displayedList'));
			$('<th>').appendTo($table).text("   ");
			$('<th>').appendTo($table).text("title");
			$('<th>').appendTo($table).text("   ");

			$.each(data.items, function(index, item) { // Iterate over the JSON array.
				var $check = (item.checked) ? "checked = checked"
						: "";
				$('<tr>')
				.appendTo($table)

				.append($('<td>').append($("<input onclick=\"check('"+ item.id+ "')\" type=\"checkbox\" " +
						"name=\"vehicle\" "+ $check+ " id=check:"+ item.id+ "/>")))
				.append($('<td>').text(item.title))
				.append($('<td>').append($("<span onclick=\"removeItem("+ list + ","+item.id+");\" >").append($("<img class=\"clickable\" width=\"20\" src=\"/myList/ressources/remove.png\" alt='pou' />")))); 
			});
			$('<tr>')
			.appendTo($table)
			.append($('<td>').append($("<span onclick=\"addItem("+list+",$('#addList').val())\" >").
					append($("<img class=\"clickable\" width=\"20\" src=\"/myList/ressources/add.png\" alt='pou' />"))))
			.append($('<td>').append($('<input type=text name=add id="addList" />')));
		},
		error : function(jqXHR, textStatus, errorThrown) {
			// Une erreur s'est produite lors de la requete
		}
	});
}

function check(idItem) {
	jQuery.ajax({
		type : 'GET', // Le type de ma requete
		url : '/myList/ListManager', // L'url vers laquelle la requete sera envoyee
		data : {
			action : "checkItem",
			idItem : idItem
		},
		success : function(data, textStatus, jqXHR) {
		},
		error : function(jqXHR, textStatus, errorThrown) {
			// Une erreur s'est produite lors de la requete
		}
	});
}

function removeList(idList) {

	jQuery.ajax({
		type : 'GET', // Le type de ma requete
		url : '/myList/ListManager', // L'url vers laquelle la requete sera envoyee
		data : {
			action : "removeList",
			listId : idList
		},
		success : function(data, textStatus, jqXHR) {
			displayLists();
		},
		error : function(jqXHR, textStatus, errorThrown) {
			// Une erreur s'est produite lors de la requete
		}
	});

}

function createList(listName, cat) {

	jQuery.ajax({
		type : 'GET', // Le type de ma requete
		url : '/myList/ListManager', // L'url vers laquelle la requete sera envoyee
		data : {
			action : "createList",
			name : listName,
			category : cat
		},
		success : function(data, textStatus, jqXHR) {
			displayLists();
		},
		error : function(jqXHR, textStatus, errorThrown) {
			// Une erreur s'est produite lors de la requete
		}
	});

}


function addItem(idList, itemName){

	jQuery.ajax({
		type : 'GET', // Le type de ma requete
		url : '/myList/ListManager', // L'url vers laquelle la requete sera envoyee
		data : {
			action : "addItem",
			title : itemName,
			listId : idList
		},
		success : function(data, textStatus, jqXHR) {
			display(idList);
		},
		error : function(jqXHR, textStatus, errorThrown) {
			// Une erreur s'est produite lors de la requete
		}
	});

}

function removeItem(idList, idItem){

	jQuery.ajax({
		type : 'GET', // Le type de ma requete
		url : '/myList/ListManager', // L'url vers laquelle la requete sera envoyee
		data : {
			action : "removeItem",
			itemId : idItem,
			listId : idList
		},
		success : function(data, textStatus, jqXHR) {
			display(idList);
		},
		error : function(jqXHR, textStatus, errorThrown) {
			// Une erreur s'est produite lors de la requete
		}
	});

}
displayLists();